<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>搜索界面</title>
    <script src="../static/js/axios.js"></script>
    <link rel="icon" href="../static/imgs/cms.png" type="image/png">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/PersonalCenter.css">
    <link rel="stylesheet" type="text/css" href="../static/css/SearchPage.css">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示！！!</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--导航栏--->
<nav class="navbar navbar-default nav_bottom">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="home-page"><a href="#"><span>首页</span></a></li>
                <li><a href="#">博客</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="user-head-icon">
                    <img src="" class="user-head" alt="">
                    <div class="drop-box" style="display: none;">
                        <div class="drop-nickname-box">
                            <div class="drop-nickname">
                            </div>
                            <div style="width: 100%;height: 2px">
                                <hr style="width: 100%;">
                            </div>
                        </div>
                        <div class="drop-info-box">
                            <div class="drop-info-fans">
                                <div class="drop-info-one fans-info">0</div>
                                <div class="drop-info-msg">粉丝</div>
                            </div>
                            <div class="drop-info-concern">
                                <div class="drop-info-one following-info">0</div>
                                <div class="drop-info-msg">关注</div>
                            </div>
                            <div class="drop-info-thumbs">
                                <div class="drop-info-one support-info">0</div>
                                <div class="drop-info-msg">获赞</div>
                            </div>
                        </div>
                        <div class="drop-nav-box">
                            <div style="width: 100%;height: 1px;margin-bottom: 20px">
                                <hr style="width: 100%">
                            </div>
                            <div class="drop-info-option personal-center-option">
                                <span class="glyphicon glyphicon-user drop-info-icon" aria-hidden="true"></span>
                                个人中心
                            </div>
                            <div class="drop-info-option">
                                <span class="glyphicon glyphicon-education drop-info-icon" aria-hidden="true"></span>
                                专栏管理
                            </div>
                            <div class="drop-info-option">
                                <span class="glyphicon glyphicon-file drop-info-icon" aria-hidden="true"></span>
                                内容管理
                            </div>
                        </div>
                        <div class="drop-exit-box">
                            <div class="drop-info-option drop-exit-option">
                                <span class="glyphicon glyphicon-log-in drop-info-icon" aria-hidden="true"></span>
                                退出
                            </div>
                        </div>
                    </div>
                </li>
                <li class="user-login-register" style="display: none;"><a href="#">登录/注册</a> </li>
                <li class="user-personal-center"><a href="#">个人中心</a></li>
                <li><a href="#">内容管理</a></li>
                <li><a href="#">消息</a></li>
                <li><a href="#">创作中心</a></li>
                <li>
                    <button class="btn btn-write-blog">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        发布博客
                    </button>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
     <!--搜索烂-->
    <div class="search-big-box">
              <div class="input-box">
                  <div class="search-input-box">
                      <label>
                          <input type="text" class="search-input">
                      </label>
                  </div>
                  <div class="search-btn-box">
                   <button class="search-btn">
                       <span style="font-size: 25px;margin-right: 8px">C</span>一下
                   </button>
                  </div>
              </div>
          </div>
     <!--搜索结果-->
<div class="search-result-box">
<div class="search-result">
    <ul class="nav nav-tabs">
        <li role="presentation" class="nav-blog active"><a href="#" style="color: black">博客</a></li>
        <li role="presentation" class="nav-column"><a href="#" style="color:black;">专栏</a></li>
        <li role="presentation" class="nav-user"><a href="#" style="color:black;">用户</a></li>
    </ul>

    <!--搜索博客-->
    <div class="blog-list" >

    </div>

    <!--搜索专栏-->
    <div class="column-list">

    </div>

    <!--搜索用户-->
    <div class="user-list" >
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
        <div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src="../warehouse/默认头像.png" class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" >
                        <a href="#" style="text-decoration: none">111</a>
                    </div>
                    <div class="user-list-intro-box">
                        222
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button  >
                        关注
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    $(function () {

        const href = decodeURI(window.location.href);//译码
        let hrefIndex1=href.split('?searchText=');
        $(".search-input").val(hrefIndex1[1]);
         $(".user-head").attr("src",window.localStorage.getItem("avatar"));
         get_user_success();
         search_blog();
    })

    /*搜索博客*/
    function search_blog() {
        if($(".blog_item").length%7!==0)
        {
            return;
        }
        let page_number=($(".blog_item").length/7);
        let url="http://localhost:8080/articleServlet?action=search_blog";
        axios({
            method:"GET",
            url:url,
            params:{
                search_content:$(".search-input").val(),
                email:window.localStorage.getItem("email"),
                page:page_number
            },
        }).then(function (res) {
             console.log(res);
            let data1=res['data']['data'];
            for(let i=0;i<data1.length;i++){
                 data1[i]['create_time']=data1[i]['create_time'].substring(0,10);
                push_blog_list(data1[i]);
            }
            /*浏览博客*/
            $(".blog-title").click(function () {
                window.open("ViewBlog.html?blog_id="+$(this).attr("blog_id"));
            })
        })
    }

    /*监听滚动条*/
    $(window).scroll(function () {
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            // alert("滚动条已经到达底部为" + $(document).scrollTop());
            if($(".nav-blog").hasClass("active")) {
                if ($(".blog_item").length % 7 !== 0) {
                    return;
                }
                search_blog();
            }
            if($(".nav-column").hasClass("active")) {
                if ($(".column-item").length % 10 !== 0) {
                    return;
                }
                search_column();
            }
            if($(".nav-user").hasClass("active")){
                  if($(".user-list-item-box").length%10!==0){
                      return;
                  }
                  search_user();
            }
        }
    })

    /*搜索专栏*/
    function search_column() {
        if($(".column-item").length%10!==0)
        {
            return;
        }
        let page_number=($(".column-item").length/10);
        let url="http://localhost:8080/articleServlet?action=search_column";
        axios({
            method:"GET",
            url:url,
            params:{
                search_content:$(".search-input").val(),
                email:window.localStorage.getItem("email"),
                page:page_number
            },
        }).then(function (res) {
              console.log(res);
            let data1=res['data']['data'];
            for(let i=0;i<data1.length;i++){
                push_column_list(data1[i]);
            }
            /*查看专栏*/
            $(".column-name").click(function () {
                window.open("ViewColumn.html?column_name="+$(this).attr("column_name"));
            })
        })
    }

    /*展示搜索专栏的结果*/
    function push_column_list(data) {
         $(".column-list").append(`<div class="column-item">
             <div class="column-item-left">
                 <div class="column-icon">
                     专栏
                 </div>
                 <div class="column-name" column_name=${data['column_name']}>
                     <a href="#">${data['column_name']}
                     </a>
                 </div>
             </div>
             <div class="column-item-right">
                 <div class="column-icon1">
                     作者
                 </div>
                 <div class="column-author">
                    ${data['author_name']}
                 </div>
             </div>
         </div>`);
    }

    /*展示搜索博客的结果*/
    function push_blog_list(data) {
         $(".blog-list").append(`<div class="blog_item">
             <div class="blog-title" blog_id=${data['id']}>
                 <a class="blog-title-info" href="#">${data['article_title']}</a>
             </div>
             <div class="blog-content">
                 ${data['content_text']}
             </div>
             <div class="blog-info">
                 <div class="blog-support">
                     <span class="glyphicon glyphicon-thumbs-up blog-icon" aria-hidden="true"></span>
                     <span class="blog-support-number">${data['support_count']}</span>
                 </div>
                 <div class="blog-comment">
                     <span class="glyphicon glyphicon-list-alt blog-icon" aria-hidden="true"></span>
                     <span class="blog-comment-number">${data['comment_count']}</span>
                 </div>
                 <div class="blog-comment">
                     <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
                     <span class="blog-collection-number">${data['collection_count']}</span>
                 </div>
                 <div class="blog-time">
                     ${data['create_time']}
                 </div>
             </div>
         </div>`);
    }

    /*获取用户成就*/
    function get_user_success() {
        let url='http://localhost:8080/userServlet?action=get_user_success'
        axios({
            method: "GET",
            url:url,
            params: {
                email:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
            let data=res['data'];
            $(".drop-nickname").html(window.localStorage.getItem("nickname"));
            $(".fans-info").html(data['data']['fans_number']);
            $(".following-info").html(data['data']['following_number']);
            $(".support-info").html(data['data']['support_number']);
        })
    }

    /*搜索按钮*/
    $(".search-btn").click(function () {
        $(".blog-list").empty();
        $(".column-list").empty();
        $(".user-list").empty();
        $(".nav-blog").click();
    })

    /*展示用户构造器*/
    function push_user_list(data) {
        let btn_class=[["user-btn-content1","关注"],["user-btn-content2","已关注"]];
        $(".user-list").append(`<div class="user-list-item-box">
            <div class="user-list-item-content">
                <!--用户头像-->
                <div class="user-list-head-box">
                    <img alt="" src=
                    ${data['headpicture']}
                    class="user-list-head">
                </div>
                <!--用户信息-->
                <div class="user-list-info-box">
                    <div class="user-list-nickname-box" userid=${data['userid']}>
                        <a href="#" style="text-decoration: none">${data['nickname']}</a>
                    </div>
                    <div class="user-list-intro-box">
                        ${data['intro']}
                    </div>
                </div>
                <!--用户按钮-->
                <div class="user-list-btn-box">
                    <button userid=${data['userid']} class="user-list-btn ${btn_class[data['isFollow']][0]}">
                        ${btn_class[data['isFollow']][1]}
                    </button>
                </div>
            </div>
        </div>`);
    }

    /*搜索用户*/
    function search_user() {
        let page_number=$(".user-list-item-box").length/10;
        let url="http://localhost:8080/userServlet?action=search_user";
        axios({
            method:"GET",
            url:url,
            params:{
                search_content:$(".search-input").val(),
                email:window.localStorage.getItem("email"),
                page_number:page_number
            },
        }).then(function (res) {
              console.log(res);
            let data1=res['data']['data'];

            for(let i=0;i<data1.length;i++){
                push_user_list(data1[i]);
            }
            $(".user-list-btn").off("click");
            $(".user-list-btn").click(function () {
                     if($(this).attr("class")==="user-list-btn user-btn-content1"){
                         modal("关注成功");
                         $(this).attr("class","user-list-btn user-btn-content2");
                         $(this).text("已关注");
                         $.post("http://localhost:8080/userServlet?action=concern",{following_id:$(this).attr("userid"),email:window.localStorage.getItem("email")});
                     }else{
                         modal("已取消关注");
                         $(this).attr("class",'user-list-btn user-btn-content1');
                         $(this).text("关注");
                         $.post("http://localhost:8080/userServlet?action=cancel_concern",{following_id:$(this).attr("userid"),email:window.localStorage.getItem("email")});
                     }
            })
            $(".user-list-nickname-box").click(function () {
                $.post("http://localhost:8080/userServlet?action=invite_others",{invite_id:$(this).attr("userid")});
                window.localStorage.setItem("invite_id",$(this).attr("userid"));
                window.open("OtherPersonalCenter.html");
            })
        })
    }


   /*分页导航*/
    {
        $(".nav-blog").click(function () {
            search_blog();
            $(".active").removeClass("active");
            $(".nav-blog").addClass("active");
            judeclass();
        })

        $(".nav-user").click(function () {
            $(".user-list").empty();
            search_user();
            $(".active").removeClass("active");
            $(".nav-user").addClass("active");
            judeclass();
        })

        $(".nav-column").click(function () {
            search_column();
            $(".active").removeClass("active");
            $(".nav-column").addClass("active");
            judeclass();
        })
    }

    /*根据分页导航切换页面状态*/
    function judeclass() {
        if($(".nav-blog").hasClass("active")){
            $(".blog-list").show();
        }else{
            $(".blog-list").hide();
        }
        if($(".nav-user").hasClass("active")){
            $(".user-list").show();
        }else{
            $(".user-list").hide();
        }
        if($(".nav-column").hasClass("active")){
            $(".column-list").show();
        }else{
            $(".column-list").hide();
        }
    }

    /*导航条事件*/
    {
        /*用户退出*/
        $(".drop-exit-option").click(function () {
            exit();
        })

        /*跳转到个人中心*/
        $(".personal-center-option").click(function () {
            location.href = "PersonalCenter.html";
        })

        /*个人中心*/
        $(".user-personal-center").click(function () {
            location.href = "PersonalCenter.html";
        })

        /*设置下拉界面的动画*/
        {
            $(".user-head").mouseenter(function () {
                $(".drop-box").fadeIn(250);
                $(".drop-box").show();
            })
            $(".user-head").mouseout(function () {
                $(".drop-box").hide();
            })
            $(".drop-box").mouseenter(function () {
                $(".drop-box").show();
                console.log("移入");
            })
            $(".drop-box").mouseout(function () {
                $(".drop-box").hide();
                console.log("移出");
            })
            $(".drop-box").mousemove(function () {
                $(".drop-box").show();
            })

        }
    }

    /*模态框函数*/
    function modal(content) {
        $('.modal-body').html(content);
        $("#myModal").modal("show");
    }

    /*首页点击事件*/
    $(".home-page").click(function () {
        location.href="Home.html";
    })

    /*logo*/
    $(".navbar-brand").click(function () {
        location.href="Home.html";
    })
</script>
</body>
</html>